<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/scrollbar.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .header1 .right{position: relative;}
        .header1 .right .dot{position: absolute;right: 10px;top: 10px;width: 8px;height: 8px;background-color: red;border-radius: 8px;}
        .content ul{position: relative;}
        .content ul li{overflow: hidden;position: relative;padding: 10px;width: 100%;background-color: #fff;}
        .content ul li a{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        .content ul li .left{float: left;width: 60px;height: 60px;border-radius: 60px;background-size: cover;background-position: center}
        .content ul li .center{float: left;margin-left: 15px;font-size: 14px;}
        .content ul li .center .top{}
        .content ul li .center .top .vip-name{color: #e60014;}
        .content ul li .center .top .sex{color: #049cce;}
        .content ul li .center .top .star{color: #fec015;}
        .content ul li .center .middle{color: #999;margin: 5px 0;}
        .content ul li .center .bottom{color: #fec015;}
        .content ul li .right{float: right;color: #999;text-align: right;font-size: 12px;}
        .content ul li .right .top{font-weight: bold;}
        .content ul li .right .top span{color: #fff;padding: 3px;border-radius: 3px;}
        .content ul li .right .top .service{background-color: #a0a0a0;}
        .content ul li .right .top .ding{background-color: #049cce;}
        .content ul li .right .middle{margin: 8px 0;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header1">
    <div class="header-fixed">
        <div class="left">
            <span>金华</span><i class="iconfont icon-arrowdown"></i>
        </div>
        <div class="center">
            <a class="search" href="../html/search.html">
                <i class="iconfont icon-search"></i>
                <span>请输入关键字</span>
            </a>
        </div>
        <div class="right">
            <a href="../html/message.html"><i class="iconfont icon-message"></i></a>
            <span class="dot"></span>
        </div>
    </div>
</header>

<div class="content">
    <ul id="list">
        <li class="bottom-line">
            <a href="../html/task_detail.html"></a>
            <div class="left face" style="background-image: url('../img/pic_renter.png')"></div>
            <div class="center">
                <div class="top">
                    <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                    <span class="sex"><i class="iconfont icon-women"></i></span>
                    <span class="star"><i class="iconfont icon-star2"></i></span>
                </div>
                <div class="middle">任务标题</div>
                <div class="bottom">￥280元</div>
            </div>
            <div class="right">
                <div class="top">
                    <span class="service">生活服务</span>
                    <span class="ding">顶</span>
                </div>
                <div class="middle">1/5</div>
                <div class="bottom">1小时前</div>
            </div>
        </li>
        <li class="bottom-line">
            <a href="../html/task_detail.html"></a>
            <div class="left face" style="background-image: url('../img/pic_renter.png')"></div>
            <div class="center">
                <div class="top">
                    <span class="name">小明</span>
                    <span class="sex"><i class="iconfont icon-women"></i></span>
                    <span class="star"><i class="iconfont icon-star2"></i></span>
                </div>
                <div class="middle">任务标题</div>
                <div class="bottom">￥280元</div>
            </div>
            <div class="right">
                <div class="top">
                    <span class="service">生活服务</span>
                    <span class="ding">顶</span>
                </div>
                <div class="middle">1/5</div>
                <div class="bottom">1小时前</div>
            </div>
        </li>
        <li class="bottom-line">
            <a href="../html/task_detail.html"></a>
            <div class="left face" style="background-image: url('../img/pic_renter.png')"></div>
            <div class="center">
                <div class="top">
                    <span class="name">小明</span>
                    <span class="sex"><i class="iconfont icon-women"></i></span>
                    <span class="star"><i class="iconfont icon-star2"></i></span>
                </div>
                <div class="middle">任务标题</div>
                <div class="bottom">￥280元</div>
            </div>
            <div class="right">
                <div class="top">
                    <span class="service">生活服务</span>
                    <span class="ding">顶</span>
                </div>
                <div class="middle">1/5</div>
                <div class="bottom">1小时前</div>
            </div>
        </li>
    </ul>
</div>

<footer class="footer">
    <div class="footer-fixed">
        <div class="foot-bar">
            <a href="javascript:void(0);" class="active">
                <div>
                    <i class="iconfont icon-home"></i>
                </div>
                <p>首页</p>
            </a>
            <a href="../html/task.html">
                <div>
                    <i class="iconfont icon-renwu"></i>
                </div>
                <p>任务</p>
            </a>
            <a href="javascript:void(0);" class="center">
                <div>
                    <div class="plus">
                        <i class="iconfont icon-plus"></i>
                    </div>
                </div>
                <p>发布</p>
            </a>
            <a href="">
                <div>
                    <i class="iconfont icon-faxian-copy-copy"></i>
                </div>
                <p>发现</p>
            </a>
            <a href="../html/center.html">
                <div>
                    <i class="iconfont icon-user"></i>
                </div>
                <p>我</p>
            </a>
        </div>
        <div class="two-btn">
            <a href="../html/publish_want.html">发布需求</a>
            <a href="../html/publish_skill.html">发布技能</a>
        </div>
    </div>
</footer>
</body>
<script>
    $('.center .plus').click(function(){
        $('.two-btn').slideToggle();
        if($(this).hasClass('plus-active')){
            $(this).removeClass('plus-active');
            $(this).css({'transform':'rotate(0deg)'});
            $('.content').removeClass('filter');
            $('.order').slideDown();
        }else{
            $(this).addClass('plus-active');
            $(this).css({'transform':'rotate(45deg)'});
            $('.content').addClass('filter');
            $('.order').slideUp();
        }
    });
</script>
</html>